<template>
  <view class="box" v-for="(item, index) in 6" :key="index">
    <view class="top" @click="handleViewBigPhoto">
      <u-image
        :show-loading="true"
        src="https://img2.baidu.com/it/u=3476445372,1644469509&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"
        width="200rpx"
        height="200rpx"
        radius="16rpx"
      ></u-image>
      <u-image
        :show-loading="true"
        src="https://img1.baidu.com/it/u=3283985472,4294746617&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750"
        width="200rpx"
        height="200rpx"
        radius="16rpx"
      ></u-image>
      <u-image
        :show-loading="true"
        src="https://img0.baidu.com/it/u=2180360864,1368997854&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=728"
        width="200rpx"
        height="200rpx"
        radius="16rpx"
      ></u-image>
    </view>
    <view class="bottom" @click="handleViewBigPhoto">
      <view class="two">
        <u-image
          :show-loading="true"
          src="https://img0.baidu.com/it/u=1009195383,853120248&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1000"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        ></u-image>
        <u-image
          :show-loading="true"
          src="https://img2.baidu.com/it/u=3243761826,544553131&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=332"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        ></u-image>
      </view>
      <view class="one">
        <u-image
          :show-loading="true"
          src="https://img2.baidu.com/it/u=2917065186,545739594&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          width="430rpx"
          height="430rpx"
          radius="16rpx"
        ></u-image>
      </view>
    </view>
    <view class="info">
      <view class="nickname">李女士</view>
      <view class="love">
        <u-icon name="heart" color="#A5A5A5" size="40rpx"></u-icon>
        <view>1</view>
      </view>
    </view>
    <view class="viewAll">
      <view @click="handleViewDetails">照片详情</view>
    </view>
  </view>
</template>

<script setup>
// 查看大图
const handleViewBigPhoto = () => {
  uni.navigateTo({
    url: "/pagesB/bigPicture/index",
  });
};

// 查看照片详情
const handleViewDetails = () => {
  uni.navigateTo({
    url: "/pagesB/photoDetails/index",
  });
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding: 0 50rpx;
  margin-bottom: 50rpx;

  .top {
    display: flex;
    justify-content: space-between;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 26rpx;

    .two {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .one {
    }
  }

  .info {
    display: flex;
    justify-content: flex-end;
    margin: 20rpx 0;

    .nickname {
      width: 80%;
      text-align: center;
      font-size: 30rpx;
      font-weight: 700;
    }

    .love {
      display: flex;
      align-items: center;
    }
  }

  .viewAll {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #3e3e3e;
    margin-top: 20rpx;

    view {
      display: inline;
      border: 1px solid #666666;
      padding: 13rpx 25rpx;
      border-radius: 5rpx;
    }
  }
}
</style>
